<template>
    <div class="org-tree-container">
        <div v-if="show" class="org-tree" :class="{horizontal, collapsable}">
            <org-tree-node
                :data="data"
                :props="props"
                :horizontal="horizontal"
                :label-width="labelWidth"
                :collapsable="true"
                :render-content="renderContent"
                :label-class-name="labelClassName"
                @on-expand="onExpand"
                @on-node-focus="(e, data) => $emit('on-node-focus', e, data)"
                @on-node-click="(e, data) => $emit('on-node-click', e, data)"
                @on-node-dblclick="dblClick"
                @on-node-mouseover="(e, data) => $emit('on-node-mouseover', e, data)"
                @on-node-mouseout="(e, data) => $emit('on-node-mouseout', e, data)"
                @on-refresh="refresh() "
                @on-node-keyup="keyUpHandeler"
            />
        </div>
    </div>
</template>

<script>
import render from './node';
export default {
    name: 'OrgTree',
    components: {
        OrgTreeNode: {
            render,
            functional: true
        }
    },
    props: {
        data: {
            type: Object,
            required: true
        },
        props: {
            type: Object,
            default: () => ({
                label: 'label',
                expand: 'expand',
                children: 'children'
            })
        },
        horizontal: Boolean,
        renderContent: Function,
        labelWidth: [String, Number],
        labelClassName: [Function, String]
    },
    data(){
        return{
            collapsable: true,
            show:true
        }
    },
    methods: {
        refresh(){
            this.show = false
            this.$nextTick(() => (this.show = true));
            console.log(this.data)
        },
        /**展开/收缩点击事件 */
        onExpand(e, data){
            this.updateData([this.data], data);
            this.$emit('on-expand', data);
            if ("expand" in data) {
                data.expand = !data.expand;
                if (!data.expand && data.children) {
                    this.collapse(data.children);
                }
            } else {
                this.$set(data, "expand", true);
            }
        },
        collapse(list) {
            var _this = this;
            list.forEach(function(child) {
                if (child.expand) {
                child.expand = false;
                }
                child.children && _this.collapse(child.children);
            });
        },
        /**双击节点 */
        dblClick(e, data){
            console.log(data)
        },
        updateData(data, node){
            for(let i in data){
                if(data[i].id === node.id){
                    data[i] = node;
                }else if(data[i].children){
                    this.updateData(data[i].children, node);
                }
            }
        },
        keyUpHandeler(data){
            this.deleteNode([this.data], data);
        },
        deleteNode(data,node){
            for(let i in data){
                if(data[i].id === node.id){
                    data.splice(i,1);
                    return;
                }else if(data[i].children){
                    this.deleteNode(data[i].children, node);
                }
            }
        },
        getData(){
            return this.data;
        }
    }
}
</script>

<style lang="scss">
@import './index.scss';
</style>